import React, { Component } from 'react';
import { connect } from 'react-redux';
import './cart-inedx.scss'
import { NavLink }from 'react-router-dom'
import { List } from 'antd-mobile';
import { DatePickerView } from 'antd-mobile';

const Item = List.Item;
class Com extends Component {
  constructor (props) {
    super(props)
    this.timebox = React.createRef()
  }

  state = {
    value: null,
    args:''
  };
  onChange = (value) => {
    console.log(value);
    this.setState({ value });
  };
  onValueChange = (args) => {
    console.log(args);
    this.setState({ args });
  };
  render () {
    return (
      <>
        <header className="header cart-header">
          <div className="cart-h-s">
            <span className="iconfont icon-arrow-left" onClick={() => {
              window.history.back()
            }}></span>
            <span>一卡通</span>
            <span className="cart-cz">在线充值</span>
          </div>
          <p><span>￥</span><span>1042.00</span></p>
          <p className="ye">当前余额</p>
        </header>
        <div className="content cart-content">
          <div className="cart-c-s">
            <p>消费记录</p>
            <p onClick={() => {
              this.timebox.current.style.display="block"
            }}>2019年10月</p>
          </div>
          <div>
            <List>
              <NavLink to="">
              <Item
                thumb={ <div><p>10-18</p>
                  <span>16:00</span></div> }
                extra={<span>-19.0</span>}
                onClick={() => {}}
              ><div>一号食堂消费</div>
              <div><span>订单号</span><span>112312314564123131</span></div>
              </Item>
              </NavLink>
              <NavLink to="">
              <Item
                thumb={ <div><p>10-18</p>
                  <span>16:00</span></div> }
                extra={<span>-19.0</span>}
                onClick={() => {}}
              ><div>一号食堂消费</div>
              <div><span>订单号</span><span>112312314564123131</span></div>
              </Item>
              </NavLink>
            </List>
          </div>
        </div>
        <div className="time-box" ref={this.timebox}>
          <div className="sub-title">
            <p onClick={()=>{}} className="time-quxiao">取消</p>
            <p className="time-xuanzhe">请选择</p>
            <p className="time-queding" onClick={()=>{
              console.log(this.state.args)
            }}>确定</p>
          </div>
          <DatePickerView
            mode="month"
            value={this.state.value}
            onChange={this.onChange}
            onValueChange={this.onValueChange}
          />
        </div>
      </>
    )
  }
}
export default connect()(Com)